import React from 'react'
import ReactEcharts from 'echarts-for-react';

export default class PagexAxis extends React.Component {
    constructor() {
        super();
        this.getOption = {
            xAxis: {
                show: true,
                // gridIndex:1,
                data: [{
                    value: '周一',
                    // 突出周一
                    textStyle: {
                        fontSize: 20,
                        color: 'red'
                    }
                }, '周二', '周三', '周四', '周五', '周六', '周日'],
                // position:'top',
                // offset:2,
                type: 'category',
                name: 'x-坐标',
                nameLocation: 'end',
                nameTextStyle: {
                    color: 'red'
                },
                nameGap: 10,
                nameRotate: 20,
                triggerEvent: true,
                // scale: true,
                // boundaryGap: ['20%', '20%']
                axisLine: {
                    // show: false
                    axisLabel: {
                        show: true,
                        formatter: '{value} kg',
                        fontWeight: 'bold'
                    }
                },
                splitLine: {
                    // show:false
                    lineStyle: {color: 'yellow'}
                },
                axisPointer: {
                    show: true,
                    type: "shadow",
                    snap: true,
                    label: {
                        show: true,
                        formatter: 'some text {value} some text '
                    }

                }
            },
            yAxis: {},
            series: [{
                data: [1, 2, 3, 4, 5, 6, 7],
                type: 'line',
            }]
        }
    }

    render() {
        var self = this;
        return <div>
            <h1>
                echarts-for-react PagexAxis
            </h1>
            <div>
                <ReactEcharts
                    option={self.getOption}
                    notMerge={true}
                    lazyUpdate={true}
                    theme={"theme_name"}/>
            </div>
            <div>
                <h1>xAxis series type: 'line'</h1>
            </div>

        </div>
    }

}